<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>更新DOM</title>
</head>
<body>
    <p id = "p-id"></p>

    <!-- HTML结构 -->
    <div id="test-div">
        <p id="test-js">javascript</p>
        <p>Java</p>
    </div>

    <script>
        var p = document.getElementById('p-id');
        p.innerHTML = 'ABC';
        p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
       
        p.style.color = '#ff0000';
        p.style.fontSize = '20px';
        p.style.paddingTop = '2em';

        var js = document.getElementById('test-js');
        js.innerHTML = 'JavaScript';
        
        js.style.color = '#ff0000';
        js.style.fontWeight = 'bold';
        
        // 测试:
        if (js && js.parentNode && js.parentNode.id === 'test-div' && js.id === 'test-js') {
            if (js.innerText === 'JavaScript') {
                if (js.style && js.style.fontWeight === 'bold' && (js.style.color === 'red' || js.style.color === '#ff0000' || js.style.color === '#f00' || js.style.color === 'rgb(255, 0, 0)')) {
                    console.log('测试通过!');
                } else {
                    console.log('CSS样式测试失败!');
                }
            } else {
                console.log('文本测试失败!');
            }
        } else {
            console.log('节点测试失败!');
        }
    </script>
</body>
</html> 